<template>
	<view class="add-agent">
		<view class="title">
			注册
		</view>
		<view class="step flex-center">
			<view :class="['box', 'flex-column', { active: stepCurrent >= stepIndex }]"
				v-for="(stepItem, stepIndex) in stepList" :key="stepIndex">
				<view class="icon-box flex-align-center">
					<view class="bg flex-center">
						<image :src="stepItem.icon" mode="aspectFill"></image>
					</view>
					<view class="line" v-if="stepIndex < stepList.length - 1"></view>
				</view>
				<text :class="['text-name', { 'text-more': stepIndex == 1 }]">{{ stepItem.name }}</text>
			</view>
		</view>
		<view class="add-agent-contain">
			<view class="open-policy-contain-item">
				<u-form :model="form" ref="uForm" :error-type="errorType" :rules="rules">
					<view v-if="stepCurrent == 0">
						<u-form-item class="form-item" label="代理商名称" prop="agentName" label-width="300" required>
							<u-input v-model="form.agentName" input-align="right" placeholder="注册后代理商名称不能变更" />
						</u-form-item>
						<u-form-item class="form-item" label="地区" prop="province" label-width="300" required>
							<u-input v-model="areaName" input-align="right" placeholder="请选择地区" />
							<u-icon slot="right" name="arrow-right" @click="areaHandel"></u-icon>
						</u-form-item>
						<u-form-item class="form-item" label="详情地址" prop="address" label-width="300" required>
							<u-input v-model="form.address" input-align="right" placeholder="请输入详情地址" />
						</u-form-item>
						<u-form-item class="form-item" label="联系人手机号" prop="linkMobile" label-width="300" required>
							<u-input v-model="form.linkMobile" input-align="right" placeholder="请输入联系人手机号" />
						</u-form-item>
						<u-form-item class="form-item" label="联系人姓名" prop="linkMan" label-width="300" required>
							<u-input v-model="form.linkMan" input-align="right" placeholder="请输入联系人姓名" />
						</u-form-item>
						<!-- <u-form-item class="form-item" label="平行代理商" prop="preAgentNo" label-width="300"
							v-if="switchFlag == 1">
							<u-input v-model="preAgentName" input-align="right" placeholder="请选择" />
							<u-icon slot="right" name="arrow-right" @click="preAgentHandel"></u-icon>
						</u-form-item> -->
						<u-form-item class="form-item" label="招商经理" prop="leasingManager" label-width="300">
							<u-input v-model="form.leasingManager" input-align="right" placeholder="请输入招商经理" />
						</u-form-item>
					</view>
					<view v-if="stepCurrent == 1">
						<u-form-item class="form-item" label="出账类型" prop="accountTypeName" label-width="300" required>
							<u-input v-model="accountTypeName" input-align="right" placeholder="请选择出账类型" />
							<u-icon slot="right" name="arrow-right" @click="isShowAccountType = true"></u-icon>
						</u-form-item>
						<u-form-item class="form-item" label="银行名称" prop="bankName" label-width="300" required>
							<u-input v-model="form.bankName" input-align="right" placeholder="请选输入银行名称" />
						</u-form-item>
						<u-form-item class="form-item" label="结算账户" prop="accountNo" label-width="300" required>
							<u-input v-model="form.accountNo" input-align="right" placeholder="请输入结算账户" />
						</u-form-item>
						<u-form-item class="form-item" label="结算户名" prop="accountName" label-width="300" required>
							<u-input v-model="form.accountName" input-align="right" placeholder="请输入结算户名" />
						</u-form-item>
						<!-- 对私 -->
						<template v-if="form.accountType == 0">
							<u-form-item class="form-item" label="身份证号" prop="identityCard" label-width="300" required>
								<u-input v-model="form.identityCard" input-align="right" placeholder="请输入身份证号" />
							</u-form-item>
							<u-form-item class="form-item" label="银行预留手机号" prop="mobileNum" label-width="300" required>
								<u-input v-model="form.mobileNum" input-align="right" placeholder="请输入银行预留手机号" />
							</u-form-item>
						</template>
						<!-- 对公 -->
						<template v-if="form.accountType == 1">
							<u-form-item class="form-item" label="联行号" prop="cnaps" label-width="300" required>
								<u-input v-model="form.cnaps" input-align="right" placeholder="请输入联行号" />
							</u-form-item>
							<u-form-item class="form-item" label="支行名称" prop="subBankName" label-width="300" required>
								<u-input v-model="form.subBankName" input-align="right" placeholder="请输入支行名称" />
							</u-form-item>
							<u-form-item class="form-item" label="统一社会信用代码" prop="unifySocialCreditCodes"
								label-width="300" required>
								<u-input v-model="form.unifySocialCreditCodes" input-align="right"
									placeholder="请输入统一社会信用代码" />
							</u-form-item>
						</template>
					</view>

				</u-form>
			</view>
		</view>
		<view class="button-box">
			<view class="pre-btn button" v-if="stepCurrent != 0" @click="preBtn">上一步</view>
			<view class="next-btn button" @click="nextBtn">
				{{ stepCurrent == stepList.length - 1 ? '确定' : `下一步${stepList[stepCurrent + 1].name}` }}
			</view>
		</view>
		<u-picker mode="region" v-model="isShowArea" @confirm="areaConfirm"></u-picker>
		<!-- <u-picker v-model="isShowPreAgent" mode="selector"></u-picker> -->
		<u-select v-model="isShowPreAgent" :list="agentFirstList" value-name="agentNo" label-name="agentName"
			@confirm="preAgentConfirm"></u-select>
		<u-select v-model="isShowAccountType" :list="accountTypeSelect" value-name="dicValue" label-name="dicLabel"
			@confirm="accountTypeConfirm"></u-select>


		<u-popup v-model="popupShow" mode="center" :mask-close-able="false" :showConfirmButton="false"
			:border-radius="20" height="600">
			<div class="dialog-main">
				<div class="dialog-main-icon"></div>
			</div>
			<div class="dialog-main-content">
				<div class="dialog-main-title">恭喜您注册成功</div>
				<div class="dialog-main-btn" @click="toLoginHandle">立即下载</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		getById,
		addAgent,
		update,
		checkLoginUserNoToken,
		checkAgentName,
		checkPreAgent,
		preList,
		checkAgentNameNoToken
	} from '@/api/agent';
	import {
		register
	} from "_a/login"
	export default {
		data() {
			let IDcardRegexp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证验证
			let phoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号验证
			let isPhone = (rule, value, callback) => {
				if (!phoneRegexp.test(value)) {
					return callback(new Error('手机号格式不对！'));
				} else {
					callback();
				}
			};
			let checkPhone = async (rule, value, callback) => {
				let data = await checkLoginUserNoToken({
					linkMobile: value
				});
				if (data.code != 200) {
					return callback(new Error('已存在！'));
				} else {
					callback();
				}
			};
			let checkName = async (rule, value, callback) => {
				let data = await checkAgentNameNoToken({
					agentName: value
				});
				if (data.code != 200) {
					return callback(new Error('已存在！'));
				} else {
					callback();
				}
			};
			let isIDCard = (rule, value, callback) => {
				if (!IDcardRegexp.test(value)) {
					return callback(new Error('身份证格式不对！'));
				} else {
					callback();
				}
			};
			return {
				isShowArea: false,
				stepList: [{
						name: '基础信息',
						icon: require('../../static/images/certification-icon1.png')
					},
					{
						name: '结算卡信息',
						icon: require('../../static/images/certification-icon1.png')
					}

				],
				form: {
					transShareSwitch: true,
					serviceFeeSwitch: true,
					commFeeSwitch: true,
					standardSwitch: true,
					withdrawFeeSwitch: true,
					withdrawAuditSwitch: true,
					activeShareSwitch: true,
					accountType: 0
				},
				areaName: '',
				stepCurrent: 0,
				rules: {
					agentName: [{
							required: true,
							message: '请输入代理商名称',
							trigger: 'blur'
						},
						{
							validator: checkName,
							trigger: 'blur',
							message: '已存在,请重新输入'
						}
					],

					linkMobile: [{
							required: true,
							message: '请输入联系人手机号',
							trigger: 'blur'
						},
						{
							validator: checkPhone,
							trigger: 'blur',
							message: '手机号已注册'
						},
						{
							validator: isPhone,
							trigger: 'blur',
							message: '手机号格式不正确'
						}
					],
					linkMan: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}],
					province: [{
						required: true,
						message: '请选择地区',
						trigger: 'blur'
					}],
					bankName: [{
						required: true,
						message: '请输入银行名称',
						trigger: 'blur'
					}],
					accountNo: [{
						required: true,
						message: '请输入结算账户',
						trigger: 'blur'
					}],
					accountName: [{
						required: true,
						message: '请输入结算户名',
						trigger: 'blur'
					}],
					identityCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					mobileNum: [{
							required: true,
							message: '请输入预留手机号',
							trigger: 'blur'
						},
						{
							validator: isPhone,
							trigger: 'blur',
							message: '手机号格式不正确'
						}
					],
					cnaps: [{
						required: true,
						message: '请输入联行号',
						trigger: 'blur'
					}],
					subBankName: [{
						required: true,
						message: '请输入支行名称',
						trigger: 'blur'
					}],
					unifySocialCreditCodes: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}],
					limitDay: [{
						required: true,
						message: '请输入提现日限额',
						trigger: 'blur'
					}],
					limitMon: [{
						required: true,
						message: '请输入提现月限额',
						trigger: 'blur'
					}]
				},
				errorType: ['toast'],
				switchFlag: false, // 0 没有设置平行代理商权限  1 有设置平行代理商权限
				isShowPreAgent: false,
				agentFirstList: [],
				preAgentName: '',
				accountTypeSelect: [{
						dicLabel: '对私',
						dicValue: 0
					},
					{
						dicLabel: '对公',
						dicValue: 1
					}
				],
				isShowAccountType: false,
				accountTypeName: '对私',
				subAgentNo: '',
				popupShow: false
			};
		},
		onLoad(options) {
			this.subAgentNo = options.agentNo

			// checkPreAgent().then(res => {
			// 	this.switchFlag = res.data.switchFlag;
			// 	if (this.switchFlag == 1) {
			// 		this.getAgentFirst();
			// 	}
			// });
		},
		methods: {
			toLoginHandle() {
				this.$router.push({
					path: '/pages/home/invitation/down-app'
				});
			},
			// 获取平行代理
			getAgentFirst(query) {
				this.selectLoading = true;
				let params = {
					name: query
				};
				preList(params).then(res => {
					this.selectLoading = false;
					this.agentFirstList = res.data.map(item => {
						item.agentName = `${item.agentName}(${item.agentNo})`;
						return item;
					});
				});
			},
			areaHandel() {
				this.isShowArea = true;
			},
			// 地址确定
			areaConfirm(areaValue) {
				const {
					province,
					city,
					area
				} = areaValue;
				this.form.province = province.label;
				this.form.city = city.label;
				this.form.area = area.label;
				this.form.areaCode = area.value;
				this.areaName = `${province.label}-${city.label}-${area.label}`;
			},
			preAgentHandel() {
				this.isShowPreAgent = true;
			},
			// 平行代理确定
			preAgentConfirm(e) {
				const {
					value,
					label
				} = e[0];
				this.form.preAgentNo = value;
				this.preAgentName = label;
			},
			// 对公对私确定
			accountTypeConfirm(e) {
				const {
					value,
					label
				} = e[0];
				this.accountTypeName = label;
				this.form.accountType = value;
			},
			// 下一步
			nextBtn() {
				let params = {
					...this.form,
					activeShareSwitch: 1,
					commFeeSwitch: 1,
					limitDay: "200000",
					limitMon: "1000000",
					serviceFeeSwitch: 1,
					standardSwitch: 1,
					transShareSwitch: 1,
					withdrawAuditSwitch: 1,
					withdrawFeeSwitch: 1,
					superAgentNo: this.subAgentNo
				};
				// params.transShareSwitch = this.form.transShareSwitch ? 1 : 0;
				// params.serviceFeeSwitch = this.form.serviceFeeSwitch ? 1 : 0;
				// params.commFeeSwitch = this.form.commFeeSwitch ? 1 : 0;
				// params.standardSwitch = this.form.standardSwitch ? 1 : 0;
				// params.withdrawFeeSwitch = this.form.withdrawFeeSwitch ? 1 : 0;
				// params.withdrawAuditSwitch = this.form.withdrawAuditSwitch ? 1 : 0;
				// params.activeShareSwitch = this.form.activeShareSwitch ? 1 : 0;
				const index = this.stepCurrent;
				if (index < this.stepList.length - 1) {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							return (this.stepCurrent += 1);
						}
					});
					// this.stepCurrent += 1;
				} else {
					this.stepCurrent = this.stepList.length - 1;
					console.log({
						params
					});
					this.$tip.loading('添加中.....');
					// return;
					register(params)
						.then(response => {
							this.$tip.loaded();
							if (response.code === 200) {
								this.$tip.toast(response.msg);
								this.popupShow = true
								setTimeout(() => {
									// this.$nav.goBack();
								}, 500);
							}
						})
						.catch(err => {
							this.$tip.loaded();
						});
				}
			},
			// 上一步
			preBtn() {
				const index = this.stepCurrent;
				// this.stepCurrent = index == 0 ? 0 : index - 1;
				this.stepCurrent -= 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	$activeColor: #fff;
	$noActiveColor: #bcdcff;

	page {
		background: #f6f9ff;
	}

	.step {
		padding: 60upx 80upx 60upx;
		background: #1b89ff;
		position: relative;
		z-index: 0;

		.box {
			font-size: 26upx;
			font-weight: 400;
			color: $noActiveColor;
			width: 50%;

			.icon-box {
				margin-bottom: 10upx;

				.bg {
					background: $noActiveColor;
					width: 60upx;
					height: 60upx;
					border-radius: 50%;

					image {
						width: 30upx;
						height: 30upx;
					}
				}

				.line {
					flex: 1;
					background: $noActiveColor;
					height: 2upx;
				}
			}

			.text-name {
				text-indent: R(-20);
			}

			.text-more {
				text-indent: R(-35);
			}

			&:last-child {
				width: 20%;
			}
		}

		.active {
			color: $activeColor !important;

			.icon-box {
				.bg {
					background: $activeColor !important;
				}

				.line {
					background: $activeColor !important;
				}
			}
		}
	}

	.add-agent-contain {
		border-radius: R(30) R(30) 0 0;
		overflow: hidden;
		margin-top: R(-20);
		position: relative;
		z-index: 1;
		background: #fff;
		padding: R(20) R(30);
	}

	.button-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: R(50);

		.button {
			border-radius: R(50);
			padding: 0 R(30);
			background-color: #4286f5;
			text-align: center;
			height: R(80);
			line-height: R(80);
		}

		.pre-btn {
			width: 30%;
			background-color: #ffffff;
		}

		.next-btn {
			width: 60%;
			color: #ffffff;
		}
	}

	.title {
		height: R(90);
		line-height: R(90);
		text-align: center;
		background: #fff;
		font-size: R(32);
		font-weight: bold;
	}

	.dialog-main {
		position: relative;
		width: 600upx;
		height: 350upx;
	}

	.dialog-main-icon {
		position: absolute;
		height: 110px;
		width: 110px;
		background-size: cover;
		background-image: url(../../common/images/regist-icon.png);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.dialog-main-content {
		text-align: center;
	}

	.dialog-main-title {
		color: #128de3;
		font-size: R(40px);
	}

	.dialog-main-btn {
		padding: 6px;
		margin: 20px 30px 0;
		border-radius: 50px;
		color: #fff;
		background-color: #128de3;
	}

	.invitation-code /deep/ .u-field__label {
		text-align: center;
		margin-top: 10px;
	}

	.register-agreement-main {
		padding: 20px;
	}

	.register-agreement-checkbox {
		display: flex;
	}

	.register-agreement-tight {
		color: $themeColor;
	}
</style>